<!--
 * @Author: dyend
 * @Date: 2021-03-09 12:38:42
 * @LastEditTime: 2022-03-16 14:21:15
 * @LastEditors: dyend
 * @Description:
 * @FilePath: 
-->
<template>
  <view class="dy-scroll-container">
    <dy-navbar title="codeInput 校验码输入" />
    <scroll-view class="dy-scroll" scroll-y>
      <!-- 基础用法 -->
      <dy-card>
        <dy-section slot="title" padding="0" title="基础用法" />
        <template slot="body">
          <dy-code-input v-model="baseUsed" :length="4" />
        </template>
      </dy-card>
      <!-- 输入项长度 -->
      <dy-card>
        <dy-section slot="title" padding="0" title="输入项长度：6" />
        <template slot="body">
          <dy-code-input v-model="length" :length="6" />
        </template>
      </dy-card>
      <!-- 均分布局 -->
      <dy-card>
        <dy-section slot="title" padding="0" title="均分布局" />
        <template slot="body">
          <dy-code-input v-model="stretch" :length="4" stretch />
        </template>
      </dy-card>
      <!-- 输入项样式 -->
      <dy-card>
        <dy-section slot="title" padding="0" title="输入项样式" />
        <template slot="body">
          <dy-code-input
            v-model="styles"
            :item-style="{ borderRadius: '25%', borderColor: '#ff508a', color: '#ff508a' }"
          />
        </template>
      </dy-card>
      <!-- 已填输入项样式 -->
      <dy-card>
        <dy-section slot="title" padding="0" title="已填输入项样式" />
        <template slot="body">
          <dy-code-input
            v-model="fillStyles"
            :length="4"
            :fill-style="{
              fontWeight: '700',
              borderColor: '#ff508a',
              color: '#000'
            }"
          />
        </template>
      </dy-card>
      <!-- 自动拉起键盘输入 -->
      <dy-card>
        <dy-section slot="title" padding="0" title="自动拉起键盘输入" />
        <template slot="body">
          <dy-code-input v-model="autoFocus" :length="4" />
        </template>
      </dy-card>
      <!-- 验证码格式化 -->
      <dy-card>
        <dy-section slot="title" padding="0" title="验证码格式化" />
        <template slot="body">
          <dy-code-input v-model="codeFormat" :length="4" code-format="@" />
        </template>
      </dy-card>
      <!-- 密码样式 -->
      <dy-card>
        <dy-section slot="title" padding="0" title="密码样式" />
        <template slot="body">
          <dy-code-input v-model="password" :length="4">
            <template slot="item" slot-scope="{ item }">{{ item ? '*' : '' }}</template>
          </dy-code-input>
        </template>
      </dy-card>
      <dy-card>
        <dy-section slot="title" padding="0" title="弹窗输入" />
        <template slot="body">
          <dy-button @click="modalInputShow = true">打开弹窗</dy-button>
        </template>
      </dy-card>
      <dy-modal v-model="modalInputShow" title="请输入验证码">
        <dy-code-input v-if="modalInputShow" v-model="modalInput" :length="4" auto-focus />
      </dy-modal>
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: 'CodeInput',
  data() {
    return {
      baseUsed: '314',
      length: '314159',
      stretch: '',
      styles: '',
      fillStyles: '',
      autoFocus: '',
      codeFormat: '9',
      password: '12',
      modalInputShow: false,
      modalInput: ''
    }
  }
}
</script>
